<template>
  <view class="my-remark">
	<uni-forms ref="form" @submit="submit" :rules="rules">
		<uni-forms-item label="美食名称:" name="foodName">
			<input class="input" type="text" placeholder="请输入美食名称" @input="binddata('foodName',$event.detail.value)" />
		</uni-forms-item>
		<uni-forms-item label="心得体会:" name="content">
			<input class="input" type="text" placeholder="请输入心得体会" @input="binddata('content',$event.detail.value)" />
		</uni-forms-item>
		<view v-if="!photo">
			<view class="uni-uploader-title">上传图片</view>
			<view class="uni-uploader-body" >
				<view class="uni-uploader__input-box">
					<view class="uni-uploader__input" @tap="chooseImage"></view>
				</view>
			</view>
		</view>
		<image :src="photo" @tap="chooseImage" mode="widthFix"></image>
		<button @click="submitForm">完成打卡</button>
	</uni-forms>
  </view>
</template>

<script>
import {uniForms, uniFormsItem} from '@dcloudio/uni-ui'
import permision from "@/common/js/permission.js"
import {mapState} from 'vuex'
export default {
  name: 'create-disk',
  components: {
    uniForms, uniFormsItem, 
  },
  data() {
  	return {
  		photo: '',
		rules: {
			foodName: {// name 字段的校验规则
				rules:[{
						required: true,
						errorMessage: '请填写美食名称！',
					},],
			},
			content: {
				rules:[{
						required: true,
						errorMessage: '请填写心得体会！',
					},],
			},
		},
  	}
  },
  computed:{
	...mapState(['userInfo','baseTarget'])
  },
  methods: {
	// 提交表单
	submit(e) {  //处理活动心得上传
		const { errors, value } = e.detail
		if(errors) return;
		if(!this.photo){
			uni.showToast({title: '请上传光盘图片', icon: 'none'})
			return;
		}
		uni.showLoading({
		  title: '正在努力上传中...',
		  mask: true
		});
		uni.uploadFile({
			url: this.baseTarget + '/clock/save',
			filePath: this.photo,
			name: 'photo',
			formData: {...value, userId: this.userInfo.id},
			success: res =>{
				if(res.data.code === 200){
					uni.showToast({title: '打卡完成！'})
					uni.switchTab({url: '/pages/mine/index'})
				}else{
					uni.showToast({title: res.data.message, icon: 'none'})
				}
			},
			fail: res=>{uni.showToast({title:'我们的网络出现了一点错误，请稍候再试~', icon: 'none'})},
			complete: ()=>{uni.hideLoading()}
		})
	},
	submitForm(form) {
		// 手动提交表单
		this.$refs.form.submit()
	},

    chooseImage: async function() {
        uni.chooseImage({
            sourceType: ['camera','album'],
            sizeType: ['compressed', 'original'],
            count: 1,
            success: (res) => {
				if(res.tempFiles[0].size > 2 * 1024 * 1000){
					uni.showToast({title: '上传的图片大小不能大于2M，请重新选择图片上传~', icon: 'none'})
					return;
				}
                this.photo = res.tempFilePaths[0]
            },
            fail: (err) => {
                // uni.getSetting({
                //     success: (res) => {
                //         let authStatus = res.authSetting['scope.album'];
                //         if (!authStatus) {
                //             uni.showModal({
                //                 title: '授权失败',
                //                 content: '校园美食点评需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                //                 success: (res) => {
                //                     if (res.confirm) {
                //                         uni.openSetting()
                //                     }
                //                 }
                //             })
                //         }
                //     }
                // })
            }
        })
    },
  }
}
</script>

<style lang='scss'>

/* 头条、百度小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
 page {
   background-color: #f5f5f5;
   padding: 10rpx;
 }

 button {
    margin-top: 10rpx;
    background-color: $theme-color;
    color: #ffffff;
    &::after{
      border: none;
    }
  }

  /* 表单 */
  .uni-form-item{
  	display: flex;
  	width: 100%;
  	padding: 10rpx 0;
  }
  .uni-form-item .title{
  	padding:10rpx 25rpx;
  }
  .uni-label {
  	width: 210rpx;
  	word-wrap: break-word;
  	word-break: break-all;
  	text-indent:20rpx;
  }
  .input {
  	height: 60rpx;
  	padding: 15rpx 25rpx;
  	line-height: 50rpx;
  	font-size: 28rpx;
  	background: #FFF;
  	flex: 1;
  }
  .textarea {
	padding: 15rpx 25rpx;
	font-size: 28rpx;
  	background:#FFF;
	height: 150rpx;
  	/* flex: 1; */
  }

  .radio-label{
	  margin-right: 10rpx;
  }

  .cell-pd {
  	padding: 22rpx 30rpx;
  }

  .list-pd {
  	margin-top: 50rpx;
  }

  .uni-uploader-body {
	width: 100%;
	display: flex;
	justify-content: center;
  	margin-top: 16rpx;
  }
  .uni-uploader__file {
	position: relative;
  	margin: 10rpx;
  	width: 280rpx;
  	height: 280rpx;
	.cross-icon{
		position: absolute;
		width: 20rpx;
		height: 20rpx;
		left: 145rpx;
		top: -10rpx;
	}
  }

  .uni-uploader__img {
  	display: block;
	position: relative;
  	width: 180rpx;
  	height: 180rpx;
  }
  .uni-uploader__input-box {
  	position: relative;
  	margin:10rpx;
  	width: 175rpx;
  	height: 175rpx;
  	border: 2rpx solid #D9D9D9;
  }
  .uni-uploader__input-box:before,
  .uni-uploader__input-box:after {
  	content: " ";
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	background-color: #D9D9D9;
  }
  .uni-uploader__input-box:before {
  	width: 4rpx;
  	height: 79rpx;
  }
  .uni-uploader__input-box:after {
  	width: 79rpx;
  	height: 4rpx;
  }
  .uni-uploader__input-box:active {
  	border-color: #999999;
  }
  .uni-uploader__input-box:active:before,
  .uni-uploader__input-box:active:after {
  	background-color: #999999;
  }
  .uni-uploader__input {
  	position: absolute;
  	z-index: 1;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
  	opacity: 0;
  }

</style>


